<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Form Elements - Metro UI :: Popular HTML, CSS and JS library</title>

</head>
<body class="cloak">
<nav data-role="appbar" class="border-bottom bd-default">
    <span class="app-bar-item">Form Elements</span>
    <div class="app-bar-item-static no-hover">
        <input type="checkbox" data-role="theme-switcher"/>
    </div>
</nav>

<div class="container mt-4">
    <h2>Input Fields</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="input" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="input" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="input" class="" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="input" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Largest Input" data-role="input" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="input" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="input" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="input" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="input" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Largest Input" data-role="input" class="largest pill-input" />
        </div>
    </div>
    
    <h2>File Input</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="file" placeholder="Small Input" data-role="file" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="file" placeholder="Medium Input" data-role="file" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="file" placeholder="Normal Input" data-role="file" class="" />
        </div>
        <div class="cell-md-3">
            <input type="file" placeholder="Large Input" data-role="file" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="file" placeholder="Large Input" data-role="file" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="file" placeholder="Small Input" data-role="file" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="file" placeholder="Medium Input" data-role="file" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="file" placeholder="Normal Input" data-role="file" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="file" placeholder="Large Input" data-role="file" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="file" placeholder="Large Input" data-role="file" class="largest pill-input" />
        </div>
    </div>
    
    <h2>Spinner</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="spinner" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="spinner" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="spinner" class="" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="spinner" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="spinner" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="spinner" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="spinner" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="spinner" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="spinner" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="spinner" class="largest pill-input" />
        </div>
    </div>
    
    
    <h2>Keypad</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="keypad" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="keypad" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="keypad" class="" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="keypad" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="keypad" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="keypad" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="keypad" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="keypad" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="keypad" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="keypad" class="largest pill-input" />
        </div>
    </div>
    
    <h2>Select</h2>
    <div class="row">
        <div class="cell-md-2">
            <select data-role="select" class="small">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select" class="medium">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="large">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="largest">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <select data-role="select" class="small pill-input">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select" class="medium pill-input">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select" class="pill-input">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="large pill-input">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="largest pill-input">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <select data-role="select" class="small pill-input" multiple>
                <option selected>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select" class="medium pill-input" multiple>
                <option selected>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-2">
            <select data-role="select" class="pill-input" multiple>
                <option selected>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="large pill-input" multiple>
                <option selected>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
        <div class="cell-md-3">
            <select data-role="select" class="largest pill-input" multiple>
                <option selected>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>
    </div>


    <h2>Calendar Picker</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="calendar-picker" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="calendar-picker" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="calendar-picker" class="" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="calendar-picker" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="calendar-picker" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="calendar-picker" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="calendar-picker" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="calendar-picker" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="calendar-picker" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="calendar-picker" class="largest pill-input" />
        </div>
    </div>


    <h2>Color Picker</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="color-picker" class="small" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="color-picker" class="medium" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="color-picker" class="" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="color-picker" class="large" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="color-picker" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="color-picker" class="small pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Medium Input" data-role="color-picker" class="medium pill-input" />
        </div>
        <div class="cell-md-2">
            <input type="text" placeholder="Normal Input" data-role="color-picker" class="pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="color-picker" class="large pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Large Input" data-role="color-picker" class="largest pill-input" />
        </div>
    </div>

    
    <h2>Date Picker</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="date-picker" class="small"/>
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Medium Input" data-role="date-picker" class="medium" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Normal Input" data-role="date-picker" class="" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="date-picker" class="large" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="date-picker" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="date-picker" class="small pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Medium Input" data-role="date-picker" class="medium pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Normal Input" data-role="date-picker" class="pill-input" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="date-picker" class="large pill-input" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="date-picker" class="largest pill-input" />
        </div>
    </div>

    
    <h2>Time Picker</h2>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="time-picker" class="small"/>
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Medium Input" data-role="time-picker" class="medium" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Normal Input" data-role="time-picker" class="" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="time-picker" class="large" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="time-picker" class="largest" />
        </div>
    </div>
    <div class="row">
        <div class="cell-md-2">
            <input type="text" placeholder="Small Input" data-role="time-picker" class="small pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Medium Input" data-role="time-picker" class="medium pill-input" />
        </div>
        <div class="cell-md-3">
            <input type="text" placeholder="Normal Input" data-role="time-picker" class="pill-input" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="time-picker" class="large pill-input" />
        </div>
        <div class="cell-md-4">
            <input type="text" placeholder="Large Input" data-role="time-picker" class="largest pill-input" />
        </div>
    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
